<template>
	<div class="match-question-check">
		<!-- 搜索条件 -->
		<el-form :inline="true" label-width="auto" class="search-bar">
			<el-form-item label="">
				<el-radio-group v-model="formQuery.status" size="">
					<el-radio-button :value="STATUS.ALL">全部</el-radio-button>
					<el-radio-button :value="STATUS.PENDING">待审核</el-radio-button>
					<el-radio-button :value="STATUS.JUDGED">已审核</el-radio-button>
				</el-radio-group>
			</el-form-item>
			<el-form-item label="比赛">
				<el-select v-model="formQuery.activityId" placeholder="请选择比赛" clearable filterable style="width: 200px"
					@change="onActivityChange">
					<el-option v-for="item in matchOptions" :key="item.value" :label="item.label" :value="item.value" />
				</el-select>
			</el-form-item>
			<el-form-item label="学生">
				<el-select v-model="selectedUser" placeholder="请选择学生" clearable filterable style="width: 220px">
					<el-option v-for="item in userOptions" :key="item.value" :label="item.label" :value="item.value" />
				</el-select>
			</el-form-item>
			<el-form-item>
				<el-button type="primary" @click="start">搜索</el-button>
			</el-form-item>
		</el-form>

		<!-- 列表 -->
		<el-table v-loading="loading.table" :data="filteredTableData" height="80vh" style="width: 100%"
			@row-click="handleRowClick">
			<el-table-column prop="user" label="学生" width="">
				<template #default="{ row }">
					{{ row.user?.xingming ? `${row.user?.xingming} (${row.user?.name})` : row.user?.name }}
				</template>
			</el-table-column>
			<el-table-column prop="userid" label="学生ID" width="100" />
			<el-table-column prop="user.phonenum" label="电话" width="140" />
			<el-table-column prop="" label="比赛" width="">
				<template #default="{ row }">
					<span>{{matchOptions.find(item => item.value === formQuery.activityId)?.label}} </span>
				</template>
			</el-table-column>
			<el-table-column prop="matchquestion.ID" label="题目ID" width="80" />
			<el-table-column prop="matchquestion.name" label="题目" show-overflow-tooltip />
			<el-table-column prop="reviewStatus" label="审核(拍照题)" width="120">
				<template #default="{ row }">
					<template v-if="row.resultdata != null">
						<el-tag class="question-intable-label" type="success" effect="plain">已审核</el-tag>
					</template>
					<template v-else>
						<el-tag class="question-intable-label" type="danger" effect="plain">未审核</el-tag>
					</template>
				</template>
			</el-table-column>
			<el-table-column prop="df" label="分数" width="60">
				<template #default="{ row }">
					<span>{{ row.df || 0 }}</span>
				</template>
			</el-table-column>
			<el-table-column prop="createdAt" label="答题时间" width="160"
				:formatter="({ createdAt }) => toLocaleString(createdAt)" />
			<el-table-column label="操作" width="100" fixed="right">
				<template #default="{ row }">
					<el-button type="primary" size="" @click.stop="handleJudge(row)">审核</el-button>
				</template>
			</el-table-column>
		</el-table>

		<!-- 分页 -->
		<el-pagination class="pager" @current-change="handlePageChange" :page-size="formQuery.pageSize"
			layout="total, prev, pager, next" :total="total" />

		<!-- 审核抽屉 -->
		<el-drawer v-model="drawerVisible" size="60%" title="" direction="rtl">
			<template #header="{ close, titleId, titleClass }">
				<span class="icon-text el-dialog__header-title">
					<el-icon class="text-primary">
						<Guide />
					</el-icon>
					<span :id="titleId" :class="titleClass">答题审核</span>
				</span>
			</template>
			<div v-loading="loading.drawer" class="judge-panel judge-panel-custom">
				<div class="panel-header">
					<!-- 学生姓名 - 电话 - 比赛名 -->
					<span>
						{{ currentRow.user?.xingming ? `${currentRow.user?.xingming} (${currentRow.user?.name})` :
							currentRow.user?.name }}
						- {{ currentRow.user?.phonenum || '' }}
						- {{ currentRow.matchquestion?.name || '' }}
					</span>
				</div>
				<div class="panel-content">
					<div class="question-section">
						<!-- 题目内容（图片或文本） -->
						<div class="question-content">
							<template v-if="currentRow.matchquestion?.images">
								<el-image :src="currentRow.matchquestion.images" fit="cover"
									style="max-width:220px;max-height:160px;cursor:pointer;"
									@click="handlePreview(currentRow.matchquestion.images, [currentRow.matchquestion.images], 0)" />
							</template>
							<template v-else>
								<span v-html="currentRow.matchquestion?.context || '无题目内容'"></span>
							</template>
						</div>
						<b>参考答案：</b>
						<div class="standard-answer">
							<!-- 富文本标准答案，图片支持点击放大 -->
							<div class="answer-box" v-html="currentRow.matchquestion?.answeranalysis || '暂未配置标准答案'"
								@click="handleRichImgPreview"></div>
						</div>
					</div>
					<div class="judge-bottom-row">
						<div class="photo-section">
							<b class="">学生拍照：</b>
							<div class="photo-box">
								<el-carousel v-if="photoList.length" :interval="5000" arrow="always"
									style="width:100%; height: 100%" height="100%">
									<el-carousel-item v-for="(img, idx) in photoList" :key="idx" style="height: 100%;">
										<el-image :src="img" fit="contain"
											style="width: 100%; height: 100%; cursor:pointer;"
											@click="handlePreview(img, photoList, idx)" />
									</el-carousel-item>
								</el-carousel>
								<el-empty v-else description="暂未提交答题图片" />
							</div>
						</div>
						<div class="grading-section grading-section-custom">
							<!-- 未审核状态 -->
							<template v-if="currentRow.resultdata == null">
								<div class="reviewed-score-row">
									<span>已设置：<b>{{ currentRow.df }}</b> 分 (未审核)</span>
								</div>
								<el-button class="manual-score-row" type="success"
									@click="manualJudge(currentRow.matchquestion?.score)">√ 满分</el-button>
								<el-button class="manual-score-row" type="danger" @click="manualJudge(0)">
									× 0分
								</el-button>
								<div class="final-score-row">
									<span>得分</span>
									<el-input-number v-model="finalScore" :min="0" :max="100" :precision="1" :step="1"
										controls-position="right" class="score-input-fixed" />
									<el-button type="primary" @click="confirmJudge">设置</el-button>
								</div>
								<div class="auto-next-row">
									<el-checkbox v-model="autoNext">判完自动跳到下一题</el-checkbox>
								</div>
							</template>
							<!-- 已审核状态 -->
							<template v-else>
								<div class="reviewed-score-row">
									<span>已设置：<b>{{ currentRow.df }}</b>分</span>
									<el-button type="primary" link @click="editScore">修改</el-button>
								</div>
								<template v-if="editMode">
									<el-button class="manual-score-row" type="success"
										@click="manualJudge(currentRow.matchquestion?.score)">√
										满分</el-button>
									<el-button class="manual-score-row" type="danger" @click="manualJudge(0)">×
										0分</el-button>
									<div class="final-score-row">
										<el-input-number @keyup.enter="confirmJudge" v-model="finalScore" :min="0"
											:max="100" :precision="1" :step="1" controls-position="right"
											class="score-input-fixed" />
										<el-button type="primary" @click="confirmJudge">设置</el-button>
										<el-button @click="editMode = false" type="info">取消</el-button>
									</div>
									<div class="auto-next-row">
										<el-checkbox v-model="autoNext">判完自动跳到下一题</el-checkbox>
									</div>
								</template>
							</template>
						</div>
					</div>
					<!-- 新增AI分析区域 -->
					<div v-if="currentRow.output" class="ai-analysis-section">
						<b>AI分析：</b>
						<div id="ai-analysis-markdown" v-html="renderMarkdown(currentRow.output)"></div>
					</div>
					<div v-if="showNextTip" class="next-tip-custom">
						判完成功，自动跳转到下一题...
					</div>
				</div>
			</div>
			<!-- 图片预览对话框（统一使用一个 el-dialog） -->
			<el-dialog v-model="previewVisible" width="60vw" top="5vh" :show-close="true" title="图片预览">
				<template #header>
					<span class="icon-text el-dialog__header-title">
						<el-icon class="text-primary">
							<Guide />
						</el-icon>
						图片预览
					</span>
				</template>
				<div style="text-align: center;">
					<div
						style="margin-bottom: 10px; display: flex; justify-content: center; align-items: center; gap: 10px;">
						<el-button v-if="previewList.length > 1" @click="showPreviousImage"
							:disabled="isFirstImage">上一张</el-button>
						<span v-if="previewList.length > 1" style="margin: 0 5px;">{{ previewStartIndex + 1 }} / {{
							previewList.length }}</span>
						<el-button v-if="previewList.length > 1" @click="showNextImage"
							:disabled="isLastImage">下一张</el-button>
						<el-button @click="rotateImage" circle><el-icon>
								<RefreshRight />
							</el-icon></el-button>
						<el-button @click="zoomIn" circle><el-icon>
								<Plus />
							</el-icon></el-button>
						<el-button @click="zoomOut" :disabled="zoomLevel <= 0.2" circle><el-icon>
								<Minus />
							</el-icon></el-button>
						<span style="margin-left: 5px;">({{ Math.round(zoomLevel * 100) }}%)</span>
					</div>
					<div ref="imageViewportEl" style="overflow: auto; max-height: 75vh; width: 100%;">
						<el-image ref="previewImageEl" :src="previewImg" alt="" fit="contain" :style="{
							width: '100%',
							height: computedImageHeight,
							display: 'block',
							transform: `rotate(${imageRotation}deg)`,
							transformOrigin: 'center center',
							transition: 'height 0.2s ease, transform 0.2s ease',
						}" @load="onPreviewImageLoad" />
					</div>
				</div>
			</el-dialog>
		</el-drawer>
	</div>
</template>

<script setup lang="ts">
import { Minus, Plus, RefreshRight } from '@element-plus/icons-vue'; // 导入图标
import { ElMessage } from 'element-plus';
import MarkdownIt from 'markdown-it';
import { computed, nextTick, onMounted, reactive, ref, watch } from 'vue'; // Added nextTick
import { useRoute, useRouter } from 'vue-router';
import { useStore } from "vuex";
import { asyncadminselectmatchuserquestion, asyncAdminUpdateMatchUserQuestion } from '../../../api'; // 确保已引入
import { Storekey } from "../../../interface";
import Studycodemodel from "../../../mysql_interface/studycodemodel";
import { QuestionType } from '../../../util/data';
import { toLocaleString } from '../../../util/time';

const store = useStore(Storekey);
const route = useRoute();
const router = useRouter();

const enum STATUS {
	ALL = '',
	PENDING = 'pending',
	JUDGED = 'judged'
}

const loading = reactive({
	table: false,    // 表格加载
	drawer: false,   // 抽屉加载
	global: false    // 全局加载（备用）
});
// 获取路由参数
onMounted(async () => {
	await fetchActivityOptions();
	// 路由带入 activityId/userId 自动筛选
	const activityId = route.query.activityId as string;
	const userId = route.query.userId as string;
	if (activityId) {
		formQuery.activityId = activityId;
	} else {
		formQuery.activityId = matchOptions.value[0]?.value || '';
	}
	await fetchTableData();
	// 仅在 userId 存在且 selectedUser 未被手动清空时设置
	if (userId && !selectedUser.value) {
		selectedUser.value = userId as string;
	}
});

function start() {
	fetchActivityOptions();
	fetchTableData();
}

// 搜索表单
const formQuery = reactive({
	activityId: '',
	status: '',
	page: 1,
	pageSize: 20
})
function onActivityChange() {
	selectedUser.value = '';
	fetchTableData();
}
// 比赛下拉框数据
const matchOptions = ref<{ label: string; value: string }[]>([]);
// 获取比赛下拉数据，参照 index.vue 但 questiontype 写死为 1
async function fetchActivityOptions() {
	const res = await store.dispatch("actionactivity", {
		questiontype: QuestionType.PUBLIC_TEST,
		_limit: 99999,
		_offset: 0,
	});
	const rows = store.state.activity?.rows || [];
	matchOptions.value = rows.map((item: Studycodemodel.Iactivity) => ({ label: item.name, value: String(item.ID), }));
}
const selectedUser = ref<string>('');
// 监听 selectedUser 变化
watch(selectedUser, (newVal) => {
	if (!newVal) {
		// 清空时移除路由中的 userId 参数
		const query = { ...route.query };
		delete query.userId;
		router.replace({ query });
	}
});
// 学生下拉框选项，应该基于状态筛选后的所有数据（不受学生筛选影响）
const userOptions = computed(() => {
	const users: { label: string; value: string }[] = [];
	const seen = new Set();
	// 先根据状态筛选（不考虑selectedUser）
	let data = tableData.value;
	if (formQuery.status === STATUS.PENDING) {
		data = data.filter(row => row.resultdata == null);
	} else if (formQuery.status === STATUS.JUDGED) {
		data = data.filter(row => row.resultdata != null);
	}
	data.forEach(row => {
		const value = String(row.userid);
		if (!seen.has(value)) {
			users.push({
				label: row.user?.name ? `${row.user.name}（${row.userid}）` : value,
				value
			});
			seen.add(value);
		}
	});
	return users;
});

// 表格数据
const tableData = ref<any[]>([])
const total = ref(0)
// 新增：计算属性用于前端状态筛选
const filteredTableData = computed(() => {
	let data = tableData.value;
	if (formQuery.status === STATUS.PENDING) {
		data = data.filter(row => row.resultdata == null);
	} else if (formQuery.status === STATUS.JUDGED) {
		data = data.filter(row => row.resultdata != null);
	}
	if (selectedUser.value) {
		data = data.filter(row => String(row.userid) === selectedUser.value);
	}
	return data;
});
// 获取列表数据
async function fetchTableData() {
	if (!formQuery.activityId) {
		tableData.value = [];
		total.value = 0;
		ElMessage.error('请选择需要赛题审核的比赛!');
		return;
	}
	loading.table = true;
	try {
		const params = {
			activityid: formQuery.activityId,
			type: '拍照',
			_limit: formQuery.pageSize,
			_offset: (formQuery.page - 1) * formQuery.pageSize,
			// _order: 'desc',
			// _orderby: 'ID',
		};
		const { count, rows } = await asyncadminselectmatchuserquestion(params);
		tableData.value = rows || [];
		total.value = count || 0;
	} catch (error) {

	} finally {
		loading.table = false;
	}
}
// 点击分页
function handlePageChange(val: number) {
	formQuery.page = val
	fetchTableData()
}
function handleRowClick(row: any, column: any, event: any) {
	handleJudge(row,)
}
// 审核抽屉
const drawerVisible = ref(false)
const currentRow = ref<any>({})
const currentRowIndex = ref<number>(-1)
const finalScore = ref<number>(0)
const autoNext = ref(false) // 自动跳题开关
const showNextTip = ref(false)

const previewVisible = ref(false)
const previewImg = ref('')
const photoList = ref<string[]>([])
// 新增：用于弹窗预览的图片列表和起始索引
const previewList = ref<string[]>([])
const previewStartIndex = ref<number>(0)
const zoomLevel = ref<number>(1) // 新增：缩放比例
const imageRotation = ref<number>(0) // 新增：旋转角度

const previewImageEl = ref<any>(null);
const imageViewportEl = ref<any>(null);
const imgNaturalDimensions = ref({ width: 0, height: 0 });
const viewportWidth = ref(0);

const editMode = ref(false)

function editScore() {
	editMode.value = true
	finalScore.value = currentRow.value.df
}

function handleJudge(row: any) {
	currentRow.value = row
	finalScore.value = row.df || 0
	drawerVisible.value = true
	showNextTip.value = false
	editMode.value = false // 默认非编辑模式

	// 重置图片预览相关状态
	previewImg.value = '';
	previewList.value = [];
	previewStartIndex.value = 0;
	zoomLevel.value = 1;
	imageRotation.value = 0; // 重置旋转角度
	imgNaturalDimensions.value = { width: 0, height: 0 };
	viewportWidth.value = 0;

	// 学生拍照图片，优先 images 字段（数组），兼容 photoUrl
	if (Array.isArray(row.images) && row.images.length > 0) {
		photoList.value = row.images
	} else if (typeof row.images === 'string' && row.images) {
		photoList.value = [row.images]
	} else if (Array.isArray(row.photoUrl)) {
		photoList.value = row.photoUrl
	} else if (row.photoUrl) {
		photoList.value = [row.photoUrl]
	} else {
		photoList.value = []
	}
}

// 手动打分
function manualJudge(score: number) {
	finalScore.value = score
	// 直接提交分数
	submitScore(score);
}

// 审核提交
function confirmJudge() {
	if (finalScore.value === null) {
		ElMessage.warning('请设置分数');
		return
	}
	submitScore(finalScore.value);
}
// 提交分数（用于同意AI建议、手动设置等）
async function submitScore(score: number) {
	finalScore.value = score
	if (currentRow.value?.ID) {
		loading.drawer = true;
		try {
			// 根据得分范围设置 resultdata,满分：正确，0分：错误，中间取值：部分正确
			let resultStatus = '';
			const maxScore = currentRow.value.matchquestion?.score || 100; // 题目满分值
			if (score >= maxScore) {
				resultStatus = '正确';
			} else if (score > 0) {
				resultStatus = '部分正确';
			} else {
				resultStatus = '错误';
			}
			await asyncAdminUpdateMatchUserQuestion({
				ID: currentRow.value.ID,
				df: finalScore.value,
				resultdata: resultStatus,
			});
			ElMessage.success('分数已更新！');
			currentRow.value.df = finalScore.value;
			if (autoNext.value) {
				showNextTip.value = true;
				setTimeout(() => {
					gotoNextQuestion()
				}, 1000)
			} else {
				drawerVisible.value = false;
				fetchTableData();
			}
		} catch (error) {
			console.error('提交分数失败', error);
		} finally {
			loading.drawer = false;
		}
	}
}
// 自动跳到下一题
function gotoNextQuestion() {
	if (!currentRow.value?.ID) return

	// 查找当前记录在完整数据中的位置
	const currentIndex = tableData.value.findIndex(item => item.ID === currentRow.value.ID)
	if (currentIndex === -1) return

	// 获取下一条记录
	const nextIndex = currentIndex + 1
	if (nextIndex < tableData.value.length) {
		const nextRow = tableData.value[nextIndex]
		handleJudge(nextRow)
	} else {
		ElMessage.info('已经是最后一题了！')
		drawerVisible.value = false
	}
}

// 预览图片
function handlePreview(img: string, list: string[], index: number) {
	previewImg.value = img
	previewList.value = list
	previewStartIndex.value = index
	zoomLevel.value = 1
	imageRotation.value = 0; // 重置旋转角度
	imgNaturalDimensions.value = { width: 0, height: 0 };
	viewportWidth.value = 0;
	previewVisible.value = true

	nextTick(() => {
		if (imageViewportEl.value) {
			viewportWidth.value = imageViewportEl.value.clientWidth;
		}
	});
}
const onPreviewImageLoad = () => {
	if (previewImageEl.value?.$el) {
		const imgElement = previewImageEl.value.$el.querySelector('img');
		if (imgElement) {
			imgNaturalDimensions.value = {
				width: imgElement.naturalWidth,
				height: imgElement.naturalHeight,
			};
		}
	}
	if (imageViewportEl.value) {
		viewportWidth.value = imageViewportEl.value.clientWidth;
	}
};
const computedImageHeight = computed(() => {
	const { width: naturalW, height: naturalH } = imgNaturalDimensions.value;
	const currentViewportW = viewportWidth.value;

	if (!naturalW || !naturalH || !currentViewportW || zoomLevel.value === 0) {
		return 'auto';
	}

	const aspectRatio = naturalW / naturalH;
	if (aspectRatio === 0 || !isFinite(aspectRatio)) return 'auto';

	const heightAtScale1 = currentViewportW / aspectRatio;

	const targetHeight = heightAtScale1 * zoomLevel.value;

	return `${targetHeight}px`;
});
watch(previewVisible, (isVisible) => {
	if (isVisible) {
		nextTick(() => {
			if (imageViewportEl.value && viewportWidth.value === 0) {
				viewportWidth.value = imageViewportEl.value.clientWidth;
				if (previewImageEl.value?.$el?.querySelector('img')?.complete) {
					onPreviewImageLoad();
				}
			}
		});
	}
});
// 计算属性判断是否为第一张或最后一张
const isFirstImage = computed(() => previewStartIndex.value === 0);
const isLastImage = computed(() => previewStartIndex.value === previewList.value.length - 1);
// 切换到上一张图片
function showPreviousImage() {
	if (!isFirstImage.value) {
		previewStartIndex.value--;
		previewImg.value = previewList.value[previewStartIndex.value];
		zoomLevel.value = 1;
		imageRotation.value = 0;
		imgNaturalDimensions.value = { width: 0, height: 0 }; // 重置尺寸以待新图片加载后重新计算
	}
}
function showNextImage() {
	if (!isLastImage.value) {
		previewStartIndex.value++;
		previewImg.value = previewList.value[previewStartIndex.value];
		zoomLevel.value = 1;
		imageRotation.value = 0;
		imgNaturalDimensions.value = { width: 0, height: 0 };
	}
}
// 放大图片
function zoomIn() {
	zoomLevel.value += 0.2;
}
// 缩小图片
function zoomOut() {
	if (zoomLevel.value > 0.2) {
		zoomLevel.value -= 0.2;
		zoomLevel.value = Math.max(0.2, parseFloat(zoomLevel.value.toFixed(2)));
	}
}
// 旋转图片
function rotateImage() {
	imageRotation.value += 90; // 每次旋转角度持续增加90度，CSS会自动处理超过360度的视觉表现
}
// 富文本图片点击放大
function handleRichImgPreview(e: MouseEvent) {
	const target = e.target as HTMLElement
	if (target && target.nodeName === 'IMG') {
		const imgSrc = (target as HTMLImageElement).src
		// 调用统一的预览处理函数
		handlePreview(imgSrc, [imgSrc], 0)
	}
}

const md = new MarkdownIt({ breaks: true, html: true, linkify: true });
function renderMarkdown(content: string) {
	if (!content) return "";
	let html = md.render(content);
	return html;
}

</script>

<style scoped>
.search-bar {
	background: #fff;
	border-radius: 4px;
}

.judge-panel {}

.judge-panel h3 {
	color: var(--el-color-primary);
	margin: 0 0 20px;
}

.section {
	margin-bottom: 24px;
}

.section h4 {
	color: var(--el-text-color-regular);
	margin-bottom: 12px;
}

.question-content {
	font-size: 16px;
	line-height: 1.6;
	margin: 10px 0;
	padding: 0 10px;
	background: var(--el-fill-color-lighter);
	border-radius: 4px;
	border-left: 4px solid var(--el-color-primary);
}

.judge-section {
	display: flex;
	gap: 24px;
}

.student-photo {
	flex: 3;
}

.score-panel {
	flex: 2;
	padding: 20px;
	background: var(--el-fill-color-lighter);
	border-radius: 4px;
}

.score-row {
	display: flex;
	align-items: center;
	margin-bottom: 20px;
	gap: 12px;
}

.score-row:last-child {
	margin-bottom: 0;
}

.manual-score .score-actions {
	display: flex;
	gap: 8px;
}

.photo-box {
	flex: 1;
	min-height: 300px;

	border: 1px solid var(--el-border-color-lighter);
	border-radius: 4px;
	overflow: hidden;
	display: flex;
	align-items: center;
	justify-content: center;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--el-fill-color-lighter);
}

.next-tip {
	margin-top: 24px;
	padding: 12px;
	text-align: center;
	background: var(--el-color-success-light-9);
	color: var(--el-color-success);
	border-radius: 4px;
	font-size: 14px;
}

.judge-panel-custom {
	height: 100%;
	display: flex;
	flex-direction: column;
}

.panel-header {
	font-size: 20px;
	font-weight: bolder;
}

.panel-header h3 {
	color: var(--el-color-primary);
	font-size: 16px;
}

.panel-content {
	flex: 1;
	display: flex;
	flex-direction: column;
	gap: 20px;
}

.question-section {
	margin-bottom: 0;
}

.question-content {
	background: var(--el-fill-color-lighter);
	padding: 16px;
	border-radius: 4px;
	margin-bottom: 16px;
}

.standard-answer {
	background: var(--el-fill-color-lighter);
	padding: 16px;
	border-radius: 4px;
}

.judge-bottom-row {
	display: flex;
	gap: 24px;
	flex: auto;
}

.photo-section {
	flex: 2;
	display: flex;
	flex-direction: column;
}

.grading-section-custom {
	flex: 1;
	background: var(--el-fill-color-lighter);
	padding: 20px;
	border-radius: 4px;
	display: flex;
	flex-direction: column;
	gap: 30px;
}

.ai-suggest-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 12px;
}

.manual-score-row {
	display: flex;
	align-items: center;
	gap: 12px;
	margin: 0;
	width: 100%;
}

.final-score-row {
	display: flex;
	align-items: center;
	gap: 12px;
	justify-content: space-between;
}

.auto-next-row {
	margin-top: 8px;
}

.next-tip-custom {
	margin-top: 24px;
	padding: 12px;
	text-align: center;
	background: var(--el-color-success-light-9);
	color: var(--el-color-success);
	border-radius: 4px;
	font-size: 14px;
}

.reviewed-score-row {
	display: flex;
	align-items: center;
	justify-content: flex-start;
	gap: 12px;
	margin-bottom: 12px;
	font-size: 16px;
	color: #333;
}

.reviewed-score-row b {
	color: var(--el-color-primary);
	font-size: 18px;
}

.score-input-fixed {
	flex: 1;
	/* width: 120px !important;
	min-width: 120px !important;
	max-width: 120px !important; */
}

/* markdown 样式适配 */
#ai-analysis-markdown {
	font-size: 13px !important;
	line-height: 1.7 !important;
	color: #222 !important;
	background: var(--el-fill-color-lighter) !important;
	padding: 12px 12px 6px 12px !important;
	border-radius: 4px !important;
	margin-top: 10px !important;
	overflow-x: auto !important;
}

/* 所有 h1~h6 统一字号，覆盖 bootstrap 默认样式 */
#ai-analysis-markdown h1,
#ai-analysis-markdown h2,
#ai-analysis-markdown h3,
#ai-analysis-markdown h4,
#ai-analysis-markdown h5,
#ai-analysis-markdown h6 {
	font-weight: bold !important;
	margin-top: 12px !important;
	margin-bottom: 6px !important;
	line-height: 1.3 !important;
	font-size: 1em !important;
	border-bottom: none !important;
	padding-bottom: 0 !important;
}

/* 兼容 bootstrap 的 .h3 等类名 */
#ai-analysis-markdown .h1,
#ai-analysis-markdown .h2,
#ai-analysis-markdown .h3,
#ai-analysis-markdown .h4,
#ai-analysis-markdown .h5,
#ai-analysis-markdown .h6 {
	font-size: 1em !important;
	font-weight: bold !important;
	margin-top: 12px !important;
	margin-bottom: 6px !important;
	line-height: 1.3 !important;
}

/* 响应式下也覆盖 bootstrap 的 h3 样式 */
@media (min-width: 1200px) {

	#ai-analysis-markdown h1,
	#ai-analysis-markdown h2,
	#ai-analysis-markdown h3,
	#ai-analysis-markdown h4,
	#ai-analysis-markdown h5,
	#ai-analysis-markdown h6,
	#ai-analysis-markdown .h1,
	#ai-analysis-markdown .h2,
	#ai-analysis-markdown .h3,
	#ai-analysis-markdown .h4,
	#ai-analysis-markdown .h5,
	#ai-analysis-markdown .h6 {
		font-size: 1em !important;
	}
}

#ai-analysis-markdown p {
	margin: 5px 0 !important;
}

#ai-analysis-markdown ul,
#ai-analysis-markdown ol {
	margin: 5px 0 5px 18px !important;
}

#ai-analysis-markdown li {
	margin-bottom: 1px !important;
}

#ai-analysis-markdown code {
	background: #f4f4f4 !important;
	color: #c7254e !important;
	padding: 1px 3px !important;
	border-radius: 3px !important;
	font-size: 92% !important;
}

#ai-analysis-markdown pre {
	background: #f4f4f4 !important;
	padding: 6px !important;
	border-radius: 4px !important;
	overflow-x: auto !important;
	font-size: 12px !important;
}

#ai-analysis-markdown blockquote {
	border-left: 4px solid var(--el-color-primary) !important;
	background: #f9f9f9 !important;
	padding: 6px 10px !important;
	margin: 6px 0 !important;
	color: #666 !important;
	border-radius: 4px !important;
	font-size: 12px !important;
}

#ai-analysis-markdown table {
	border-collapse: collapse !important;
	margin: 6px 0 !important;
	width: 100% !important;
	font-size: 12px !important;
}

#ai-analysis-markdown th,
#ai-analysis-markdown td {
	border: 1px solid #e0e0e0 !important;
	padding: 3px 6px !important;
}

#ai-analysis-markdown th {
	background: var(--el-color-primary-light-9) !important;
}

#ai-analysis-markdown img {
	max-width: 150px !important;
	max-height: 100px !important;
	object-fit: cover !important;
	border-radius: 4px !important;
	margin: 3px 0 !important;
	display: block !important;
}

/* markdown 样式适配，彻底覆盖 bootstrap 等全局样式 */
#ai-analysis-markdown :is(h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6) {
	all: unset;
	display: block;
	box-sizing: border-box;
	font-weight: bold !important;
	margin-top: 12px !important;
	margin-bottom: 6px !important;
	line-height: 1.3 !important;
	font-size: 1em !important;
	border-bottom: none !important;
	padding-bottom: 0 !important;
}

#ai-analysis-markdown {
	font-size: 13px !important;
	line-height: 1.7 !important;
	color: #222 !important;
	background: var(--el-fill-color-lighter) !important;
	padding: 12px 12px 6px 12px !important;
	border-radius: 4px !important;
	margin-top: 10px !important;
	overflow-x: auto !important;
}

@media (min-width: 1200px) {
	#ai-analysis-markdown :is(h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6) {
		font-size: 1em !important;
	}
}

#ai-analysis-markdown p {
	margin: 5px 0 !important;
}

#ai-analysis-markdown ul,
#ai-analysis-markdown ol {
	margin: 5px 0 5px 18px !important;
}

#ai-analysis-markdown li {
	margin-bottom: 1px !important;
}

#ai-analysis-markdown code {
	background: #f4f4f4 !important;
	color: #c7254e !important;
	padding: 1px 3px !important;
	border-radius: 3px !important;
	font-size: 92% !important;
}

#ai-analysis-markdown pre {
	background: #f4f4f4 !important;
	padding: 6px !important;
	border-radius: 4px !important;
	overflow-x: auto !important;
	font-size: 12px !important;
}

#ai-analysis-markdown blockquote {
	border-left: 4px solid var(--el-color-primary) !important;
	background: #f9f9f9 !important;
	padding: 6px 10px !important;
	margin: 6px 0 !important;
	color: #666 !important;
	border-radius: 4px !important;
	font-size: 12px !important;
}

#ai-analysis-markdown table {
	border-collapse: collapse !important;
	margin: 6px 0 !important;
	width: 100% !important;
	font-size: 12px !important;
}

#ai-analysis-markdown th,
#ai-analysis-markdown td {
	border: 1px solid #e0e0e0 !important;
	padding: 3px 6px !important;
}

#ai-analysis-markdown th {
	background: var(--el-color-primary-light-9) !important;
}

#ai-analysis-markdown img {
	max-width: 150px !important;
	max-height: 100px !important;
	object-fit: cover !important;
	border-radius: 4px !important;
	margin: 3px 0 !important;
	display: block !important;
}
</style>

<style>
.match-question-check .el-drawer__header {
	margin: 0;
}

.match-question-check .question-content img,
.match-question-check .standard-answer img {
	max-width: 220px;
	max-height: 160px;
	object-fit: cover;
	cursor: pointer;
}

/* .match-question-check .el-carousel__container {
	min-height: auto;
	height: auto !important;
} */
</style>